import React, { useState, useEffect } from 'react';
import './zi.css';
import axios from 'axios';
import {useNavigate} from 'react-router-dom'
// 模拟数据
const CATEGORIES = [
  '推荐', '最新', '新车', '本地', '导购', 'SUV', '行业', '新能源', '摩托车', '用车', '车辆评测', '提车作业', '自驾游', '越野', '改装', '学车'
];

// 删除静态FEATURED_uploads数组
// 添加shi数据状态管理
const Main = () => {
  const navigate = useNavigate();
  const [list, setList] = useState([]);
  const [shiuploads, setShiuploads] = useState([]); // 新增shi数据状态
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [shiLoading, setShiLoading] = useState(true); // 新增shi加载状态
  const [shiError, setShiError] = useState(null); // 新增shi错误状态

  const getList = async () => {
    try {
      setLoading(true);
      const res = await axios.get('http://localhost:3005/api/jjk/zixun');
      if (res.data.code === 200) {
        setList(res.data.data);
      } else {
        setError('数据获取失败: ' + res.data.msg);
      }
    } catch (err) {
      setError('网络错误: ' + err.message);
    } finally {
      setLoading(false);
    }
  };

  // 新增获取shi数据的方法
  const getShiData = async () => {
    try {
      setShiLoading(true);
      const res = await axios.get('http://localhost:3005/api/jjk/shi');
      if (res.data.code === 200) {
        setShiuploads(res.data.data);
      } else {
        setShiError('shi数据获取失败: ' + res.data.msg);
      }
    } catch (err) {
      setShiError('网络错误: ' + err.message);
    } finally {
      setShiLoading(false);
    }
  };

  useEffect(() => {
    getList();
    getShiData(); // 调用获取shi数据方法
  }, []);

  return (
    <div className="car-news-container">
      {/* 导航栏 */}
      <nav className="category-nav">
        <div className="category-scroll">
          {CATEGORIES.map((category, index) => (
            <button
              key={index}
              className={`category-btn ${index === 0 ? 'active' : ''}`}
            >
              {category}
            </button>
          ))}
          <button className="more-btn">更多 ▼</button>
        </div>
      </nav>

      {/* 主要内容区 */}
      <div className="content-wrapper">
        <div>
          {/* 修改上传按钮，添加id参数 */}
          <p onClick={()=>navigate('/shang')}>上传</p>
          {/* 如果需要从列表中选择特定视频进行编辑，可以添加以下代码 */}
          {/* 在视频卡片中添加编辑按钮 */}
        </div>
        {/* 左侧内容 */}
        <div className="main-content">
          <div className="featured-uploads">
            {/* 将静态数据渲染替换为动态数据渲染 */}
            {shiLoading ? (
              <div>加载中...</div>
            ) : shiError ? (
              <div>错误: {shiError}</div>
            ) : (
              shiuploads.map(video => (
                <div key={video._id} className="video-card">
                  <div className="video-thumbnail" onClick={()=>navigate(`/detail/${video._id}`)}>
                    <img 
                      src={video.cover || '/default-cover.jpg'} 
                      alt={video.title} 
                    />
                    <span className="video-duration">未知时长</span>
                    <div className="video-overlay"></div>
                  </div>
                  <div className="video-info">
                    <h3 className="video-title">{video.title}</h3>
                    <div className="video-meta">
                      <span className="video-channel">{video.description}</span>
                      <span className="video-stats">{video.views}次观看</span>
                    </div>
                    {/* 添加编辑按钮 */}
                    <button onClick={(e) => {
                      e.stopPropagation(); // 防止触发视频详情点击事件
                      navigate(`/shang/${video._id}`);
                    }}>
                      编辑
                    </button>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>

        {/* 右侧热搜榜 */}
        <div className="trending-sidebar">
          <h3 className="trending-title">热搜榜</h3>
          <ul className="trending-list">
            {list.map(item => (
              <li key={item.rank} className="trending-item">
                <span className={`rank ${item.rank <= 3 ? 'top-rank' : ''}`}>{item.rank}</span>
                <span className="trending-title-text">{item.title}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default Main;